<template>
    <div class="testView04 full-body">
        <!-- <g-time-node>
            <template v-slot:title>
                version 1.0.0
            </template>
            <template v-slot:content>
                1、更新empty-pop<br/>
                2、修复已知问题
            </template>
        </g-time-node> -->
        <button class="btn primary_btn" @click="shuffle()">shuffle</button>
        <button class="btn primary_btn" @click="add()">add</button>
        <button class="btn primary_btn" @click="clear()">clear</button>
        <transition-group name="list" tag="div">
            <p v-for="item in list" class="list-item" :key="item">{{item.name}}</p>
        </transition-group>
    </div>
</template>
<script>
import {ref,getCurrentInstance} from 'vue';
import lodash from 'lodash'
export default{
    name:'testView03',
    setup(props){
        let list = ref([{name:1},{name:2},{name:3},{name:4},{name:5},{name:6}]);
        let shuffle = ()=>{
            list.value = lodash.shuffle(list.value);
        }
        let add = ()=>{
            list.value.splice(list.value.length-3, 0, {name:list.value.length+1});
            
            for(let i=0;i<10;i++){
                setTimeout(() => {
                    list.value.splice(list.value.length-3, 0, {name:list.value.length+1})
                }, 100*(i+1));
            }
            
        }
        let clear = ()=>{
            list.value.length = [];
        }
        return {
            list,
            shuffle,
            add,
            clear
        }
    }
    
}
</script>
<style>
    .testView04{
        padding: 10px;
        overflow: hidden;
    }

    

    .list-item {
        transition: all .4s;
        /* display: inline-block; */
        margin-right: 10px;
    }
    .list-enter-from, .list-leave-to
    /* .list-complete-leave-active for below version 2.1.8 */ {
        opacity: 0;
        transform: translateX(30px);
    }
    .list-active{
        /* position: absolute; */
    }

   
    

</style>